<template>
    <div class="container">

        <el-form :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="180px" class="demo-ruleForm">
			<div style="display:inline-block;width:200px;height:100px;margin-left: 5px;" v-for="(item,index) in bankList">
				<img :src=" item.imgPath" alt="" style="width: 100%;height:100%;" @click="getbank(item,index)" :style="{'border':activeindex===index?'1px solid red':''}">


			</div>
			<el-form-item label="选择支行："  v-if="bankShow" style="margin-top:30px;">
				<el-select v-model="backname" value-key="id" placeholder="请选择" style="width: 300px" @change="getbankname">
					<el-option
					  v-for="item in subBank"
					  :key="item.id"
					  :label="item.name"
					  :value="item">
					</el-option>
				</el-select>
				</el-form-item>
            <el-row  style="margin-top:20px;">
                <el-col :span="12">
                    <el-form-item label="申请人姓名：" prop="name">
                        <el-input placeholder="请输入内容" v-model="ruleForm.name" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="申请人身份证号：" prop="idCard">
                        <el-input placeholder="请输入内容" v-model="ruleForm.idCard" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="还款周期：" prop="loanPeriod">
                        <el-input placeholder="请输入内容" v-model="ruleForm.loanPeriod" style="width: 300px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="申请用途：" prop="remarks">
                        <el-input placeholder="请输入内容" v-model="ruleForm.remarks" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="申请贷款金额：" prop="amount">
                        <el-input placeholder="请输入内容" v-model="ruleForm.amount" style="width: 300px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="身份证照片：（人像面）" >
					     <!-- <upload-img ref="uploadChang1" :maxNum="1" :files='listUrl1' style="width:300px"></upload-img> -->

						<el-upload
							 class="upload-poster"
							 :action="$store.state.upload"
							 :show-file-list="false"
							 :on-success="success"
							 name="files"
							 >
							 <img v-if="ruleForm.idCardJustImg" :src="$store.state.plantImg + ruleForm.idCardJustImg" class="avatar">
							 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						 </el-upload>


					</el-form-item>
					<el-form-item label="身份证照片：（国徽面）"  >
					      <el-upload
					      	 class="upload-poster"
					      	 :action="$store.state.upload"
					      	 :show-file-list="false"
					      	 :on-success="success1"
					      	 name="files"
					      	 >
					      	 <img v-if="ruleForm.idCardBackImg" :src="$store.state.plantImg + ruleForm.idCardBackImg" class="avatar">
					      	 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					       </el-upload>
					</el-form-item>
					<el-form-item label="担保公司名称：" prop="guaranteeCompanyName">
					    <el-input placeholder="请输入内容" v-model="ruleForm.guaranteeCompanyName" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="担保公司法人名称：" prop="guaranteeCompanyLegalPerson">
					    <el-input placeholder="请输入内容" v-model="ruleForm.guaranteeCompanyLegalPerson" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="联系人：" prop="contactsPeople">
					    <el-input placeholder="请输入内容" v-model="ruleForm.contactsPeople" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="营业执照："  >
					      <el-upload
					      	 class="upload-poster"
					      	 :action="$store.state.upload"
					      	 :show-file-list="false"
					      	 :on-success="success2"
					      	 name="files"
					      	 >
					      	 <img v-if="ruleForm.businessImg" :src="$store.state.plantImg + ruleForm.businessImg" class="avatar">
					      	 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					       </el-upload>
					</el-form-item>
					<el-form-item label="资质认定书："  >
					      <el-upload
					      	 class="upload-poster"
					      	 :action="$store.state.upload"
					      	 :show-file-list="false"
					      	 :on-success="success3"
					      	 name="files"
					      	 >
					      	 <img v-if="ruleForm.naturalImg" :src="$store.state.plantImg + ruleForm.naturalImg" class="avatar">
					      	 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					       </el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="股权架构明细：">
					     <el-upload
					     	 class="upload-poster"
					     	 :action="$store.state.upload"
					     	 :show-file-list="false"
					     	 :on-success="success4"
					     	 name="files"
					     	 >
					     	 <img v-if="ruleForm.sharesImg" :src="$store.state.plantImg + ruleForm.sharesImg" class="avatar">
					     	 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					      </el-upload>
					</el-form-item>
					<el-form-item label="贷款申请书：">
					      <el-upload
					      	 class="upload-poster"
					      	 :action="$store.state.upload"
					      	 :show-file-list="false"
					      	 :on-success="success5"
					      	 name="files"
					      	 >
					      	 <img v-if="ruleForm.applyImg" :src="$store.state.plantImg + ruleForm.applyImg" class="avatar">
					      	 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					       </el-upload>
					</el-form-item>
					<el-form-item label="担保公司法人身份证号：" prop="guaranteeCompanyLegalPersonIdCard">
					    <el-input placeholder="请输入内容" v-model="ruleForm.guaranteeCompanyLegalPersonIdCard" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="组织代码：" prop="businessLicenseNum">
					    <el-input placeholder="请输入内容" v-model="ruleForm.businessLicenseNum" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="联系人电话：" prop="contactsTel">
					    <el-input placeholder="请输入内容" v-model="ruleForm.contactsTel" style="width: 300px"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="抵押品：" prop="mortgage">
					    <!-- <el-input placeholder="请输入内容" v-model="ruleForm.mortgage" style="width: 300px"></el-input> -->
						<el-select v-model="ruleForm.mortgage" placeholder="请选择" style="width: 300px">
						    <el-option
						      v-for="item in list"
						      :key="item.name"
						      :label="item.name"
						      :value="item.name">
						    </el-option>
						  </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="抵押品估值：" prop="mortgageValue">
					    <el-input placeholder="请输入内容" v-model="ruleForm.mortgageValue" style="width: 300px"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="ruleForm.mortgage == '土地证'">
				<el-col :span="12">
					<el-form-item label="土地使用权人：" prop="legalPerson">
					    <el-input placeholder="请输入内容" v-model="ruleForm.legalPerson" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="座落：" prop="position">
					    <el-input placeholder="请输入内容" v-model="ruleForm.position" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="地号：" prop="landNum">
					    <el-input placeholder="请输入内容" v-model="ruleForm.landNum" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="上传土地证："  >
					      <el-upload
					      	 class="upload-poster"
					      	 :action="$store.state.upload"
					      	 :show-file-list="false"
					      	 :on-success="success6"
					      	 name="files"
					      	 >
					      	 <img v-if="ruleForm.proveImg" :src="$store.state.plantImg + ruleForm.proveImg" class="avatar">
					      	 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					       </el-upload>
					</el-form-item>
				</el-col>
				<el-col :span ="10">
					<el-form-item label="地类（用途）：" prop="purpose">
					    <el-input placeholder="请输入内容" v-model="ruleForm.purpose" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="使用权类型：" prop="usufruct">
					    <el-input placeholder="请输入内容" v-model="ruleForm.usufruct" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="使用权面积：" prop="area">
					    <el-input placeholder="请输入内容" v-model="ruleForm.area" style="width: 300px"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="ruleForm.mortgage == '林权证'">
				<el-col :span="12">
					<el-form-item label="所有权权利人：" prop="legalPerson">
					    <el-input placeholder="请输入内容" v-model="ruleForm.legalPerson" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="座落：" prop="position">
					    <el-input placeholder="请输入内容" v-model="ruleForm.position" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="林地使用期：" prop="term">
					    <el-input placeholder="请输入内容" v-model="ruleForm.term" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="上传林权证："  >
					      <el-upload
					      	 class="upload-poster"
					      	 :action="$store.state.upload"
					      	 :show-file-list="false"
					      	 :on-success="success6"
					      	 name="files"
					      	 >
					      	 <img v-if="ruleForm.proveImg" :src="$store.state.plantImg + ruleForm.proveImg" class="avatar">
					      	 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					       </el-upload>
					</el-form-item>
				</el-col>
				<el-col :span ="10">
					<el-form-item label="面积：" prop="area">
					    <el-input placeholder="请输入内容" v-model="ruleForm.area" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="林种：" prop="species">
					    <el-input placeholder="请输入内容" v-model="ruleForm.species" style="width: 300px"></el-input>
					</el-form-item>

				</el-col>
			</el-row>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>

import axios from "axios"
import uploadImg from '../../../common/uploadImg';
export default {
	components: {
	    uploadImg
	},
    data() {
        return {
			activeindex:'',
			idCardJustImg:'',
			backname:{},
			bankShow:false,
			bankList:[],
            listUrl1:'',
            ruleForm: {
				naturalImg:'',
				businessImg:'',
				proveImg:'',
				sharesImg:'',
				applyImg :'',

				idCardBackImg:'',
				idCardJustImg:'',

				status:0,
                files: '',
				mortgage:'林权证',
            },
			list:[{name:'土地证'},{name:'林权证'}],
			subBank:[],
            rules: {

            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
		success(response,file,fileList) {
		   this.ruleForm.idCardJustImg = response.data.fileName
		},
		success1(response,file,fileList) {
		   this.ruleForm.idCardBackImg = response.data.fileName
		},
		success2(response,file,fileList) {
		   this.ruleForm.businessImg = response.data.fileName
		},
		success3(response,file,fileList) {
		   this.ruleForm.naturalImg = response.data.fileName
		},
		success4(response,file,fileList) {
		   this.ruleForm.sharesImg = response.data.fileName
		},
		success5(response,file,fileList) {
		   this.ruleForm.applyImg = response.data.fileName
		},
		success6(response,file,fileList) {
		   this.ruleForm.proveImg = response.data.fileName
		},
		// 根据银行获取支行
        getbank(e,index){
			console.log(index)
			this.activeindex = index
			// console.log(e)
			this.backname = ""
			this.bankShow = true
			this.ruleForm.pid = e.id
			this.ruleForm.bankName = e.name
			this.subBank = e.bankInfo
		},
		// 获取支行信息
		getbankname(e){

			this.ruleForm.branchBankName = e.name
			this.ruleForm.bankInfoId = e.id
		},
		// 返回上一页
        backPage() {
            this.$router.go(-1);
        },
        init() {
           axios.get("http://grove.cpzsyun.com:81/api/control/loanInfo/bankInfo").then((res)=>{
				this.bankList = res.data
				for(let i=0;i<this.bankList.length;i++){
					this.bankList[i].imgPath = this.$store.state.plantImg + this.bankList[i].imgPath
				}
           })
        },

        submitrule(formName) {
            this.$confirm('请确认申请信息，提交后无法撤回', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
            	axios.post("http://grove.cpzsyun.com:81/api/control/loanInfo/apply",this.ruleForm).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success',
					    duration: 1000
					});
					this.$router.go(-1);
            	})
            });
        }
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 180px;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.el-upload--text {
    width: 180px;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
